不知不覺，居然來到 Day 7 了。

先恭喜自己一下。

第一週沒有跑路！！！

原本第一天只是想說，先從 HTML、CSS 這些平常比較常碰的東西重新整理。

結果這幾天寫下來發現——

嗯。

我跟 CSS 好像吵了很多架。

從 HTML 美味蟹堡，到死都不肯站中間的方塊，再到 Flexbox 的方向感測驗。

明明都是平常看過、用過的東西，真的重新自己打一遍，還是會遇到：

蛤？原來是這樣？

的時刻。

這週到底幹了什麼？

Day 1｜先把第一週排好

第一天先沒有急著開始寫程式。

畢竟 30 天很長，如果第一天就開始亂衝，感覺寫到後面很容易：

啊今天要寫什麼？

所以決定一週規劃一次。

至少先讓未來七天的自己知道自己在忙什麼 XD

Day 2｜HTML 美味蟹堡 🍔

重新整理 HTML 結構。

也成功發現以前真的很容易 html：

<div>
  <div>
    <div>
      <div>

嗯

好厚一顆漢堡。

這天重新看了：

header、main、section、article、footer

最大的心得就是：

div 沒有不好。

但真的不要吃到飽。

Day 3｜不要再跑了！給我乖乖站中間

這天的目標超級簡單：

置中。

結果先搞懂：

文字置中：

text-align: center;

跟方塊本人左右置中：

margin: 0 auto;

根本不是同一件事。

最大的心得：
不要只有字搬家，方塊本人也要一起搬啦 XD

Day 4｜Flexbox 登場

想要的不只左右置中。

開始貪心：
上下也一起可以嗎？

於是 Flexbox 出場。

display: flex;
justify-content: center;
align-items: center;

成功把東西抓到正中間。

本來以為事情終於結束。

結果看到：

flex-direction: column;

……

怎麼方向又變了？？？

Day 5｜方向感測驗開始

這天終於把「主軸」、「交叉軸」重新搞懂。

不再死背：

justify = 左右
align = 上下

而是改成：

justify-content → 跟著主軸走
align-items → 跟著交叉軸走

至於主軸在哪？

先看：

flex-direction

總算找回一點方向感。

沒有迷路。

很好。

Day 6｜方塊，你是不是偷偷變胖？

原本只是寫：

width: 200px;

結果加個 padding、border……

啪。

怎麼變 250px 了？？？

這才重新整理了 Box Model。

也終於搞懂為什麼很多地方都會看到：

box-sizing: border-box;

簡單來說就是：

說好 200px，就給我維持 200px。

不要再偷胖了。

第一週最大的感覺

這幾天最大的感覺不是：

「哇，我學了好多完全沒看過的東西！」

反而比較像是：

「喔……原來有些東西我只是會用，但沒有真的整理過。」

尤其很多 CSS 都屬於：

以前知道這樣寫會有效果。

但如果突然問：
為什麼？
腦袋可能會瞬間：
。。。。。。。
因為大家都這樣寫？

所以這次重新自己操作、自己踩坑，再把它寫下來，我覺得反而比較容易記住。

第一週從：
HTML 美味蟹堡
一路吃到：
CSS Box Model 偷偷變胖。

過程中有：
div 疊疊樂
文字自己搬家
方塊死都不站中間
Flexbox 突然換方向
方塊莫名其妙胖了 50px

很精彩~~~~~~

Day 1～Day 7，完成！✓

30 天挑戰目前進度： 7 / 30

明天再來規劃第二週要折磨……不是! 嘻嘻

要挑戰什麼 XD

Day 7，第一週完成！